<template>
  <el-card>
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>订单管理</el-breadcrumb-item>
      <el-breadcrumb-item>订单列表</el-breadcrumb-item>
    </el-breadcrumb>

    <el-col :span="8">
      <el-input
        placeholder="请输入内容"
        v-model="getOrders.query"
        class="input-with-select"
        clearable
        @clear="InitGetOrders"
        @keydown.enter.native="InitGetOrders"
      >
        <el-button
          slot="append"
          icon="el-icon-search"
          @click="InitGetOrders"
        ></el-button>
      </el-input>
    </el-col>

    <el-table :data="orderList" style="width: 100%" >
      <el-table-column prop="order_id" label="订单Id" width="100" align="center">
      </el-table-column>
      <el-table-column prop="user_id" label="用户id" width="100" align="center">
      </el-table-column>
      <el-table-column prop="order_number" label="订单编号" width="120" align="center">
      </el-table-column>
      <el-table-column prop="order_price" label="订单价格" width="120" align="center">
      </el-table-column>
      <el-table-column prop="order_pay" label="订单支付" width="120" align="center">
        <template slot-scope="scope">
          <el-select :value="scope.row.order_pay" disabled placeholder="请选择">
            <el-option
              v-for="item in payOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </template>
      </el-table-column>
      <el-table-column prop="is_send" label="是否发货" width="120" align="center">
      </el-table-column>
      <el-table-column prop="pay_status" label="支付状况" width="120" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.pay_status == 1">已支付</div>
          <div v-else>未支付</div>
        </template>
      </el-table-column>
      <el-table-column prop="order_fapiao_title" label="发票抬头" width="120" align="center">
      </el-table-column>
      <el-table-column prop="order_fapiao_company" label="发票公司" width="120" align="center">
      </el-table-column>
      <el-table-column prop="order_fapiao_content" label="发票内容" width="120" align="center">
      </el-table-column>
      <el-table-column prop="consignee_addr" label="地址" width="120" align="center">
      </el-table-column>
      <el-table-column prop="create_time" label="创建时间" width="200" align="center">
      </el-table-column>
      <el-table-column prop="update_time" label="更新时间" width="200" align="center">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="180" align="center">
        <template slot-scope="scope">
          <el-tooltip
            class="item"
            effect="dark"
            content="修改订单信息"
            placement="top"
          >
            <el-button
              size="middle"
              icon="el-icon-edit"
              type="primary"
              @click="handleEdit(scope.row)"
              title="修改订单"
            ></el-button>
          </el-tooltip>

          <el-tooltip
            class="item"
            effect="dark"
            content="快递信息"
            placement="top"
          >
            <el-button
              size="middle"
              icon="el-icon-location"
              type="success"
              @click="showKuaidi(scope.row)"
            ></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>

    <div class="block">
      <!-- <span class="demonstration">完整功能</span> -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="getOrders.pagenum"
        :page-sizes="[1, 3, 5, 10]"
        :page-size="getOrders.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>

    <!--  order_id: "",
        is_send: "",
        order_pay: "",
        order_price: "",
        order_number: "",
        pay_status:"" -->
    <el-dialog title="修改订单" :visible.sync="editDialogFormVisible">
      <el-form :model="editForm" ref="editForm">
        <el-form-item label="订单id" prop="order_id">
          <el-input v-model="editForm.order_id" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="订单支付" prop="order_pay">
          <el-select v-model="editForm.order_pay" placeholder="请选择">
            <el-option
              v-for="item in payOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="订单是否发货" prop="is_send">
          <el-radio v-model="editForm.is_send" label="是">已经发货</el-radio>
          <el-radio v-model="editForm.is_send" label="否">未发货</el-radio>
        </el-form-item>
        <el-form-item label="订单价格" prop="order_price">
          <el-input
            v-model="editForm.order_price"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="订单数量" prop="order_number">
          <el-input
            v-model="editForm.order_number"
            auto-complete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="订单支付状态" prop="pay_status">
          <el-radio v-model="editForm.pay_status" label="0">未付款</el-radio>
          <el-radio v-model="editForm.pay_status" label="1">已付款</el-radio>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editOrderSubmit()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="物流信息" :visible.sync="dialogTableVisible">
      <el-table :data="kuaidiData">
        <el-table-column
          property="time"
          label="时间"
          width="150"
        ></el-table-column>
        <el-table-column
          property="context"
          label="内容"
          width="250"
        ></el-table-column>
        <el-table-column property="location" label="地址"></el-table-column>
      </el-table>
    </el-dialog>
  </el-card>
</template>

<script>
import { getOrders, editOrders, getKuaidi } from "../../api/index";
import dateFormat from "../../uitils/formatDate"

export default {
  name: "",
  data() {
    return {
      getOrders: {
        query: "",
        pagenum: 1,
        pagesize: 5,
        user_id: "",
        pay_status: "",
        is_send: "",
        order_fapiao_title: "",
        order_fapiao_company: "",
        order_fapiao_content: "",
        consignee_addr: ""
      },
      total: 0,
      orderList: [],
      payOptions: [
        {
          value: "0",
          label: "未支付"
        },
        {
          value: "1",
          label: "支付宝"
        },
        {
          value: "2",
          label: "微信"
        },
        {
          value: "3",
          label: "银行卡"
        }
      ],
      editDialogFormVisible: false,
      editForm: {
        order_id: "",
        is_send: "",
        order_pay: "",
        order_price: "",
        order_number: "",
        pay_status: ""
      },

      dialogTableVisible: false,
      kuaidiData: [
        {
          time: "2018-05-10 09:39:00",
          ftime: "2018-05-10 09:39:00",
          context: "已签收,感谢使用顺丰,期待再次为您服务",
          location: ""
        },
        {
          time: "2018-05-10 08:23:00",
          ftime: "2018-05-10 08:23:00",
          context:
            "[北京市]北京海淀育新小区营业点派件员 顺丰速运 95338正在为您派件",
          location: ""
        },
        {
          time: "2018-05-10 07:32:00",
          ftime: "2018-05-10 07:32:00",
          context: "快件到达 [北京海淀育新小区营业点]",
          location: ""
        },
        {
          time: "2018-05-10 02:03:00",
          ftime: "2018-05-10 02:03:00",
          context:
            "快件在[北京顺义集散中心]已装车,准备发往 [北京海淀育新小区营业点]",
          location: ""
        },
        {
          time: "2018-05-09 23:05:00",
          ftime: "2018-05-09 23:05:00",
          context: "快件到达 [北京顺义集散中心]",
          location: ""
        },
        {
          time: "2018-05-09 21:21:00",
          ftime: "2018-05-09 21:21:00",
          context: "快件在[北京宝胜营业点]已装车,准备发往 [北京顺义集散中心]",
          location: ""
        },
        {
          time: "2018-05-09 13:07:00",
          ftime: "2018-05-09 13:07:00",
          context: "顺丰速运 已收取快件",
          location: ""
        },
        {
          time: "2018-05-09 12:25:03",
          ftime: "2018-05-09 12:25:03",
          context: "卖家发货",
          location: ""
        },
        {
          time: "2018-05-09 12:22:24",
          ftime: "2018-05-09 12:22:24",
          context: "您的订单将由HLA（北京海淀区清河中街店）门店安排发货。",
          location: ""
        },
        {
          time: "2018-05-08 21:36:04",
          ftime: "2018-05-08 21:36:04",
          context: "商品已经下单",
          location: ""
        }
      ]
    };
  },
  watch: {},
  props: {},
  components: {},
  computed: {},
  beforeMount() {
    this.InitGetOrders();
  },
  methods: {
    async InitGetOrders() {
      console.log(this.getOrders.query);
      let { data, meta } = await getOrders(this.getOrders);
      console.log(data);
      this.total = data.total;
      this.orderList = data.goods.reduce((pre, cur) => {
        cur.create_time = dateFormat(new Date(cur.create_time))
        cur.update_time = dateFormat(new Date(cur.update_time))
        return [...pre, cur];
      }, []);
      
    },

    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.getOrders.pagesize = val;
      this.InitGetOrders();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.getOrders.pagenum = val;
      this.InitGetOrders();
    },

    handleEdit(row) {
      console.log(row);
      this.editForm.order_id = row.order_id;
      this.editForm.is_send = row.is_send;
      this.editForm.order_pay = row.order_pay;
      this.editForm.order_price = row.order_price;
      this.editForm.order_number = row.order_number;
      this.editForm.pay_status = row.pay_status;

      this.editDialogFormVisible = true;
    },

    async editOrderSubmit() {
      this.editForm.pay_status = this.editForm.pay_status * 1;
      this.editForm.is_send = this.editForm.is_send == "是" ? "1" : "0";
      console.log(this.editForm);

      let { data, meta } = await editOrders(this.editForm);
      console.log(meta);
      if (meta.status === 201) {
        this.$message.success("更新订单成功");
        this.editDialogFormVisible = false;
        this.$nextTick(() => {
          this.InitGetOrders();
        });
      } else {
        this.$message.error(meta.msg);
      }
    },

    async showKuaidi(row) {
      if (row.is_send == "否")
        return this.$message.warning("此订单尚未发货 没有快递信息~ 请耐心等候");

      // let { data, meta } = await getKuaidi();
      this.dialogTableVisible = true;
      // console.log(data);
      // console.log(meta);
    }
  },
  filters: {}
};
</script>

<style scoped lang="css">

</style>
